<template>
	<view>
		<view class="lb-main-32">
			<u-empty v-if="listData.length < 1" mode="data" text="暂无数据" icon="/static/empty/data.png"></u-empty>

			<view class="lb-box" v-for="(item,index) in listData" :key="index">
				<view class="lb-item">
					<view class="lb-left">
						<image :src="getImgUrl(item.goods.cover_image)" mode=""></image>
					</view>
					<view class="lb-right">
						<view class="lb-name">
							{{item.goods.name}}
						</view>
						<view class="lb-ratio">数量：{{item.num}}</view>
						<view class="lb-ratio">验证码：{{item.code}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		giveRecord
	} from "@/api/apis/retail.js"
	import {
		setImgUrl,
		fmtFormat
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				keyword: '',
				page: 1,
				limit: 10,
				listData: [],
				isLoading: false,
				current: 0
			}
		},
		onShareAppMessage: function(res) {},
		onShareTimeline: function(res) {},
		methods: {
			//跳转
			goTo(id, type) {
				uni.navigateTo({
					url: '/pages/channel/give/give?id=' + id
				})
			},
			getImgUrl(url) {
				return setImgUrl(url);
			},
			//列表
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				this.isLoading = true;
				giveRecord().then(res => {
					uni.hideLoading();
					this.listData = res.data;
				})
			},
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			//注意 这里是重要的一步，不满足条件下拉加载不能继续请求数据
			if (!this.isLoading) {
				this.getList();
			}

		},
	}
</script>

<style lang="scss">
	.lb-search {
		padding: 15rpx 32rpx;
	}

	.top-menu {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lb-box {
		// height: 188rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.lb-item {
			display: flex;
			// align-items: center;

			.lb-left {
				width: 140rpx;
				height: 140rpx;
				flex-shrink: 0;
				padding: 12rpx 0;
			}

			.lb-right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 12rpx;

				.lb-name {
					font-size: $main-font-28;
					color: $main-font-color;
				}

				.lb-ratio {
					font-size: $main-font-24;
					color: $main-font-color;

					text {
						color: #F65D40;
					}
				}

				.lb-btn {
					display: flex;
					justify-content: space-between;

					.btn {
						display: flex;
						justify-content: space-evenly;
						align-items: center;
						margin-right: 24rpx;

						image {
							width: 28rpx;
							height: 28rpx;
						}

						width: 140rpx;
						height: 48rpx;
						background: linear-gradient(106deg, #F7583F 0%, #F28F4C 100%);
						border-radius: 24rpx;

						font-size: $main-font-24;
						color: $main-font-color-white;

						&:nth-of-type(2n-1) {
							background: linear-gradient(106deg, #FFC67D 0%, #FF8F35 100%);
						}
					}
				}
			}

		}
	}
</style>